<template>
    <div style="height: 600px;">
        <Timeline ref="timeline" :items="items" :groups="groups" :options="options">
        </Timeline>
    </div>
</template>
   
<script>
import { Timeline } from 'vue2vis'

export default {
    components: { Timeline },
    data() {
        return {
            groups: [
                {
                    id: 1,
                    content: '待派工（10）',
                },
                {
                    id: 2,
                    content: '已派工（20）',
                },
                {
                    id: 3,
                    content: '进行中（30）',
                },
                {
                    id: 4,
                    content: '已完成（100）',
                },
                {
                    id: 5,
                    content: '已作废（0）',
                }
            ],
            items: [
                {
                    id: 12,
                    group: 1,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    style:"color: white; background-color: red;",
                },
                {
                    id: 13,
                    group: 1,
                    content: '0/300',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    style:"color: white; background-color: blue;",
                },
                {
                    id: 11,
                    group: 1,
                    content: '0/200',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 14,
                    group: 1,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 22,
                    group: 2,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    style:"color: white; background-color: green;",
                },
                {
                    id: 23,
                    group: 2,
                    content: '0/300',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 21,
                    group: 2,
                    content: '0/200',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 24,
                    group: 2,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 25,
                    group: 2,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 26,
                    group: 2,
                    content: '0/100',
                    start: '2014-04-19 08:00',
                    end: '2014-04-19 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 32,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 33,
                    group: 3,
                    content: '0/300',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 34,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 35,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 36,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-19 08:00',
                    end: '2014-04-19 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 432,
                    group: 4,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 433,
                    group: 4,
                    content: '0/300',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 431,
                    group: 4,
                    content: '0/200',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 434,
                    group: 4,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5431,
                    group: 5,
                    content: '0/200',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5434,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5435,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5436,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-19 08:00',
                    end: '2014-04-19 20:00',
                    title: '生产订单：P20231010-0004<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
            ],
            options: {
                editable: {
                    updateGroup: true,
                    updateTime: true,
                },
            },
        }
    },
    mounted: function () {

    }
}
</script>
   
<style lang="less" scoped>
.blue {
    color: white;
    background-color: blue;
}

.green {
    color: white;
    background-color: green;
}

.vis-item.red {
    color: white;
    background-color: red;
}

.yellow {
    color: black;
    background-color: yellow;
}
</style>